<template>
    <Drawer title="患者详情" v-model="drawer" width="720" :mask-closable="false" :styles="styles" @on-close="handleDrawerCancel">
        <Form :model="formData" label-position="top">
            <Row :gutter="32">
                <Col span="8">
                    <FormItem label="姓名">
                        <Input v-model="formData.name" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="生日">
                        <DatePicker v-model="formData.brithday" type="date" placeholder="用户生日"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年龄">
                        <InputNumber :max="150" :min="1" v-model="formData.age"></InputNumber>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col span="8">
                    <FormItem label="微信昵称">
                        <Input v-model="formData.nickname"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="微信/QQ号">
                        <Input v-model="formData.wx"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="患者来源">
                        <Select v-model="formData.channel">
                            <Option v-for="(channel, index) in channelList" :key="'channel' + index" :value="channel.id">{{channel.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="性别">
                        <RadioGroup v-model="formData.sex">
                            <Radio label="1">男</Radio>
                            <Radio label="2">女</Radio>
                            <Radio label="0">不详</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="手机号">
                        <Input v-model="formData.phone"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col span="8">
                    <FormItem label="城市">
                        <Select v-model="formData.city" filterable>
                            <Option
                                    v-for="item in cityList"
                                    :value="item.id"
                                    :key="item.id"
                            >{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="16">
                    <FormItem label="详细地址">
                        <Input v-model="formData.address"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col span="8">
                    <FormItem label="病种">
                        <Select v-model="formData.disease">
                            <Option v-for="(disease, index) in diseaseList" :key="'disease' + index" :value="disease.id">{{disease.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="16">
                    <FormItem label="部位">
                        <Select v-model="formData.consultant" filterable multiple>
                            <Option
                                    v-for="item in bodyPartList"
                                    :value="item.id"
                                    :key="item.id"
                            >{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="16">
                    <FormItem label="患者标签">
                        <Select v-model="formData.tag" filterable multiple>
                            <OptionGroup v-for="(item, index) in tagList" :key="index" :label="item.name">
                                <Option v-for="(items, inum) in item.children" :value="items.id" :key="inum">{{ items.name }}</Option>
                            </OptionGroup>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="归属人">
                        <Select v-model="formData.personnel">
                            <Option v-for="(member, index) in memberList" :key="'member' + index" :value="member.id">{{member.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="就诊类型">
                        <Select v-model="formData.state">
                            <Option v-for="(type, index) in typeList" :key="'type' + index" :value="type.id">{{type.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="诊室">
                        <Select v-model="formData.room">
                            <Option v-for="(room, index) in clinicList" :key="'room' + index" :value="room.id">{{room.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="职业">
                        <Input v-model="formData.Occupation"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="下次回访日期">
                        <DatePicker v-model="formData.reVistDate" :options="dateOption"  type="date"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="下次复诊日期">
                        <DatePicker  v-model="formData.reCallDate" :options="dateOption"  type="date"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem label="备注">
                        <Input
                                type="textarea"
                                v-model="formData.remarks"
                                :rows="4"
                                placeholder="请输入备注内容"
                        />
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="handleDrawerCancel">取消</Button>
            <Button type="primary" @click="handleDrawer">保存</Button>
        </div>
    </Drawer>
</template>

<script>
    import { PatientUpdata } from '@/api/patient';
    import { formatWithYear } from '@/utils/datetime';

    export default {
        name: 'DetailEdit',
        data () {
            return {
                drawer: false,
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },
                formData: {
                    name: '',
                    brithday: '',
                    age: 1,
                    nickname: '',
                    wx: '',
                    channel: '',
                    sex: '1',
                    phone: '',
                    city: '',
                    address: '',
                    disease: '',
                    consultant: [],
                    tag: [],
                    personnel: '',
                    state: '',
                    room: '',
                    Occupation: '',
                    reVistDate: '',
                    reCallDate: '',
                    remarks: ''
                },
                channelList: [],
                cityList: [],
                diseaseList: [],
                bodyPartList: [],
                tagList: [],
                memberList: [],
                typeList: [],
                clinicList: [],
                patientId: '',
                dateOption: {
                    disabledDate (pick) {
                        const curDate = new Date();
                        let reVal = 0;
                        if (pick < curDate) {
                            reVal = 1;
                        }
                        return reVal;
                    }
                }
            }
        },
        methods: {
            handleDrawerCancel () {
                this.drawer = false
            },
            handleDrawer () {
                const params = this.getParams()
                PatientUpdata(params).then((res) => {
                    this.$Message.success(' 保存信息成功');
                    this.$emit('closeDrawer')
                    this.drawer = false
                }).catch(() => {})
            },
            getParams () {
                const {
                    name, brithday: birthday, age, nickname, wx: wx_name, channel: source_channel_id, sex: gender,
                    phone: mobile, city: city_id, address, disease: patient_diseases_id, consultant: body_parts_ids,
                    tag: tags_ids, personnel: belong_member_id, state: outpatient_type_id, room: clinic_id,
                    Occupation: profession, reVistDate: next_callback_time, reCallDate: next_revisiting_time, remarks: remark
                } = this.formData
                return {
                    id: this.patientId,
                    name,
                    birthday: birthday ? this.formDate(birthday) : '',
                    age,
                    nickname,
                    wx_name,
                    source_channel_id,
                    gender,
                    mobile,
                    city_id,
                    address,
                    patient_diseases_id,
                    body_parts_ids: body_parts_ids.join(','),
                    tags_ids: tags_ids.join(','),
                    belong_member_id,
                    outpatient_type_id,
                    clinic_id,
                    profession,
                    next_callback_time: next_callback_time ? this.formDate(next_callback_time) : '',
                    next_revisiting_time: next_revisiting_time ? this.formDate(next_revisiting_time) : '',
                    remark,
                    effect_type_id: '',
                    risk_type_id: '',
                    clinic_assess_id: ''
                }
            },
            formDate (date) {
                return formatWithYear(date, '-')
            },
            getData (data) {
                this.drawer = true
                const detailData = JSON.parse(JSON.stringify(data))
                this.patientId = detailData.id
                this.formData = {
                    name: detailData.name,
                    brithday: detailData.birthday,
                    age: detailData.age,
                    nickname: detailData.nickname,
                    wx: detailData.wx_name,
                    channel: detailData.source_channel_id,
                    sex: detailData.gender,
                    phone: detailData.mobile,
                    city: detailData.city_id,
                    address: detailData.address,
                    disease: detailData.patient_diseases_id,
                    consultant: detailData.body_parts_ids,
                    tag: detailData.tags_ids,
                    personnel: detailData.belong_member_id,
                    state: detailData.outpatient_type_id,
                    room: detailData.clinic_id,
                    Occupation: detailData.profession,
                    reVistDate: this.compareToday(detailData.next_callback_time) ? undefined : detailData.next_callback_time,
                    reCallDate: this.compareToday(detailData.next_revisiting_time) ? undefined : detailData.next_revisiting_time,
                    remarks: detailData.remark
                }

                const { source_channel_list, city_list, patient_diseases_list, body_parts_list, tags_list, member_list, outpatient_type_list, clinic_list } = detailData.condition
                this.channelList = source_channel_list;
                this.cityList = city_list;
                this.diseaseList = patient_diseases_list;
                this.bodyPartList = body_parts_list;
                this.tagList = tags_list;
                this.memberList = member_list;
                this.typeList = outpatient_type_list;
                this.clinicList = clinic_list || [];
            },
            compareToday (date) {
                var curTime = new Date();
                var thatTime = new Date(Date.parse(date));
                return (curTime >= thatTime);
            }
        }
    }
</script>

<style scoped>

</style>
